import { Col, message, Row } from 'antd';
import { useEffect, useState } from 'react';
import { useModel } from 'umi';
import WebHeader from './components/WebHeader';
import WebNavCard from './components/WebNavCard';
import { getWebNavCardList } from './service';
import type { WebNavTableListItem } from './typings';

const WebNavIndex = () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const [webNavList, setWebNavList] = useState<WebNavTableListItem[]>([]);
  useEffect(() => {
    getWebNavCardList().then((res) => {
      if (res?.success && res?.data) {
        setWebNavList(res.data);
      } else {
        message.error({ content: res?.message || '获取统计信息失败', key: 'WebNavCardList' });
      }
    });
  }, []);
  return (
    <div
      style={
        !currUser
          ? {
              backgroundImage: 'url(/web-nav.webp)',
              backgroundRepeat: 'no-repeat',
              backgroundSize: 'cover',
              height: '100%',
              overflowX: 'hidden',
            }
          : {}
      }
    >
      {!currUser && <WebHeader />}
      <Row gutter={8} justify="center" style={{ margin: '0 auto' }}>
        {webNavList.map((item) => (
          <Col key={item._id} style={{ margin: '1.5vw' }}>
            <WebNavCard webNav={item} />
          </Col>
        ))}
      </Row>
    </div>
  );
};
export default WebNavIndex;
